<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表中表格的查看功能</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a{
            color: #009688;
        }
        .box{
            width:1400px;
            margin: 0 100px;
        }
        .table-tr1 .table-tr1-td{
            width: 1400px;
            height: 60px;
            color: #676767;
            font-size: 26px;
            text-align: center;
            line-height: 60px;
        }
        .body_title{
            width: 150px;
            height: 55px;
            background: #F6F6F6;
            text-align: center;
            line-height: 55px;
            border: 1px solid #A1A1A1;
            font-size: 17px;
            color: #696969;
            font-weight: 600;
        }
        .body_content{
            width: 310px;
            height: 55px;
            text-align: center;
            line-height: 55px;
            border: 1px solid #A1A1A1;
            color: #979797;
        }

        .table-tr1-td3 {
            font-size: 17px;
            color: #696969;
            height: 150px;
            width: 150px;
            border: 1px solid #A1A1A1;
            text-align: center;
        }

        .table-tr1-td4 {
            height: 150px;
            width: 1236px;
            border: 1px solid #A1A1A1;
            color: #979797;
        }

        .table-tr1-td5 {
            height: 50px;
            width: 1388px;
            border: 1px solid #A1A1A1;
            color: #0EAC9F;
        }

        .table-tr1-td6 {
            font-size: 17px;
            color: #696969;
            height: 150px;
            width: 150px;
            border: 1px solid #A1A1A1;
            text-align: center;
        }

        .table-tr1-td7 {
            height: 150px;
            width: 1236px;
            border: 1px solid #A1A1A1;
            color: #979797;
        }

        img {
            width: 200px;
            height: 200px;
        }
        /* 评论 */
        .reply {
            width: 1370px;
            height: 60px;
            font-size: 20px;
            font-weight: bolder;
            color: #666;
            line-height: 60px;
            margin: 50px 0 30px 0;
            padding-left: 20px;
            border-bottom: 2px solid #888;
        }

        .reply_comment {
            margin-left: 30px;
        }

        .all_reply {
            margin-top: 20px;
            width: 900px;
            height: 100px;
        }

        .all_title {
            margin: 0 0 30px 10px;
            font-size: 20px;
            font-weight: bolder;
            color: #666;
        }

        .all_body {
            margin-left: 120px;
        }

        #all_item {
            margin-bottom: 10px;
        }

        #comment_user {
            font-size: 20px;
            margin-bottom: 6px;
        }

        #comment_content {
            color: #888;
            font-size: 16px;
        }

        #photo {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        #show_time {
            color: #888;
        }

        .nomore {
            width: 1390px;
            padding-top: 20px;
            color: #aaa;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <div class="box">
        <table class="table-class">
            <tr class="table-tr1">
                <td class="table-tr1-td"><h1>课程详细信息</h1></td>
            </tr>
        </table>
        <table>
            <tr>
                <th class="table_body body_title">课程名称：</th>
                <th class="table_body body_content" id="courseName"></th>
                <th class="table_body body_title">上传时间：</th>
                <th class="table_body body_content" id="createDate"></th>
                <th class="table_body body_title">上传人：</th>
                <th class="table_body body_content" id="trueName"></th>
            </tr>
            <tr>
                <th class="table_body body_title">课程售价：</th>
                <th class="table_body body_content" id="courseNprice"></th>
                <th class="table_body body_title">课程关键字</th>
                <th class="table_body body_content" id="coursePrimary"></th>
                <th class="table_body body_title">课程分类</th>
                <th class="table_body body_content" id="className"></th>
            </tr>
            <tr>
                <th class="table_body body_title">点赞量</th>
                <th class="table_body body_content" id="likeNum"></th>
                <th class="table_body body_title">收藏量</th>
                <th class="table_body body_content" id="collectNum"></th>
                <th class="table_body body_title">评论量</th>
                <th class="table_body body_content" id="commentNum"></th>
            </tr>
        </table>
        <table class="table-class">
            <tr class="table-tr1">
                <td class="table-tr1-td3">课程介绍</td>
                <td class="table-tr1-td4">
                    <div class="layui-input-inline">
                        <textarea placeholder="请输入内容" class="layui-textarea" style="width: 810px; height: 150px;"
                                  id="courseInfo"></textarea>
                    </div>
                </td>
            </tr>
        </table>
        <table class="table-class">
            <tr class="table-tr1">
                <td class="table-tr1-td3">课程备注</td>
                <td class="table-tr1-td4">
                    <div class="layui-input-inline">
                        <textarea placeholder="请输入内容" class="layui-textarea" style="width: 810px; height: 150px;"
                                  id="courseIntro"></textarea>
                    </div>
                </td>
            </tr>
        </table>
        <table class="table-class">
            <tr class="table-tr1">
                <td class="table-tr1-td5"><i class="layui-icon layui-icon-upload"></i>封面图</td>
            </tr>
        </table>
        <table class="table-class">
            <tr class="table-tr1">
                <td class="table-tr1-td6">课程主图</td>
                <td class="table-tr1-td7">
                    <img src="" id="url"/>
                </td>
            </tr>
        </table>
        <table class="table-class">
            <tr class="table-tr1">
                <td class="table-tr1-td5"><i class="layui-icon layui-icon-upload"></i>课程视频</td>
            </tr>
        </table>
        <table class="table-class">
            <tr class="table-tr1">
                <td class="table-tr1-td6">预览课程</td>
                <td class="table-tr1-td7">
                    <video id="video" src="" width="350px" height="180px" controls="controls" autoplay="autoplay"/>
                </td>
            </tr>
        </table>
        <!-- 评论 -->
        <div>
            <div class="reply">
                <i class="layui-icon layui-icon-edit"></i>&nbsp;&nbsp;回复评论及需修改内容
            </div>
            <form class="layui-form reply_comment" lay-filter="layForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账号:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="account" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">评论内容:</label>
                    <div class="layui-input-inline">
                        <textarea name="content" lay-verify="required" placeholder="请发表您的评论"
                                  class="layui-textarea" style="resize: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="search">确定</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 全部评论 -->
        <div class="all_reply">
            <div class="all_title"><i class="layui-icon layui-icon-at"></i>&nbsp;&nbsp;全部评论</div>
            <div class="all_body">
                <!--<img id="photo" src="/images/13.jpg"/>
                <label id="comment_user">伊丽莎白</label>
                <label id="comment_content">罗密欧与朱丽叶</label>
                <label id="show_time">2021-10-08</label>
                <a onclick="javascript:hideComment();">隐藏</a>&nbsp;&nbsp;&nbsp;<a onclick="javascript:;">删除</a>-->
            </div>
            <div class="nomore">
                没有更多评论了
            </div>
        </div>
    </div>
</div>
<div style="display: none" id="parentId"></div>
<input type="text" name="commodityId" id="commodityId" hidden>
<input type="text" name="commodityId" id="createId" hidden>
</body>
<script>
    layui.use(['jquery', 'layer', 'table', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;

        var layForm = form.val("layForm");//获取layForm中的所有值
        //获取到课程的数据
        var courseData = JSON.parse(localStorage.getItem("courseData"));
        var commodityId = courseData.courseId
        //评论量 课程评论表
        $.ajax({
            url: "/course/getCommentCounts",
            data: {"commodityId": commodityId},
            type: 'post',
            dataType: 'json',
            success: function (data) {
                $("#commentNum").text(data.data);
            }
        });

        //用户赋值
        var user = localStorage.getItem('user');
        user = JSON.parse(user);
        $('input[name=userName]').val(user.data.trueName);
        $('input[name=account]').val(user.data.account);

        //获取对应课程评论
        getAllComment();

        function getAllComment() {
            $.ajax({
                url: '/comment/getALLComment',
                type: 'post',
                dataType: 'json',
                data: {'commodityId': commodityId, 'type': 2},
                success: function (data) {
                    var list = data.data;
                    var i = 0;
                    for (i; i < list.length; i++) {
                        if (list[i].display == 2 && list[i].status == 1) {
                            $('.all_body').append('<div id="all_item">' + '<img id="photo" src="' + list[i].imageUrl + '"/>&nbsp;' +
                                '<label id="comment_user">' + list[i].showName + '：' + '</label>&nbsp;' +
                                '<label id="comment_content">' + list[i].content + '</label>&nbsp;&nbsp;&nbsp;' +
                                '<label id="show_time">' + list[i].commentDate + '</label>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:hideComment(' + list[i].id + ',' + list[i].display + ');">隐藏</a>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:deleteTable(' + list[i].id + ');">删除</a>' + '</div>');
                        } else if (list[i].display == 3 && list[i].status == 1) {
                            $('.all_body').append('<div id="all_item">' + '<img id="photo" src="' + list[i].imageUrl + '"/>&nbsp;' +
                                '<label id="comment_user">' + list[i].showName + '：' + '</label>&nbsp;' +
                                '<label id="comment_content">' + list[i].content + '</label>&nbsp;&nbsp;&nbsp;' +
                                '<label id="show_time">' + list[i].commentDate + '</label>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:hideComment(' + list[i].id + ',' + list[i].display + ');">显示</a>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:deleteTable(' + list[i].id + ');">删除</a>' + '</div>');
                        } else if (list[i].status == 3) {
                            $('.all_body').append('<div id="all_item">' + '<img id="photo" src="' + list[i].imageUrl + '"/>&nbsp;' +
                                '<label id="comment_user">' + list[i].showName + '：' + '</label>&nbsp;' +
                                '<label id="comment_content">' + list[i].content + '</label>&nbsp;&nbsp;&nbsp;' +
                                '<label id="show_time">' + list[i].commentDate + '</label>&nbsp;&nbsp;&nbsp;' +
                                '<label style="color: #037EFE">已删除</label>' + '</div>');
                        }
                    }
                }
            })
        }

        var commentDate;

        //现在时间
        function getTime() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var dateStr = year + "-" + zeroFilling(month) + "-" + zeroFilling(day) + " " + zeroFilling(hour) + ":" + zeroFilling(minute) + ":" + zeroFilling(second);
            commentDate = dateStr;
        }

        function zeroFilling(data) {
            if (data < 10) {
                data = "0" + data;
            }
            return data;
        }

        //提交评论 添加课程
        form.on('submit(search)', function (obj) {
            getTime();
            var json = {
                userId: user.data.userId,
                commodityId: commodityId,
                parentId: 0,
                content: obj.field.content,
                commentDate: commentDate,
                display: 2,
                type: 2,
                userType: 2,

            };
            $.ajax({
                url: '/comment/submitComment',
                type: 'post',
                dataType: 'json',
                data: json,
                success: function (data) {
                }
            })
        })

        //隐藏显示评论
        hideComment = function hideComment(id, display) {
            var dis = 0;
            if (display == 2) {
                dis = 3
            } else if (display == 3) {
                dis = 2
            }
            ;
            $.ajax({
                url: '/comment/showComment',
                type: 'post',
                dataType: 'json',
                data: {'id': id, 'display': dis},
                success: function (data) {
                    location.reload();
                }
            })

        }
        //删除（根据id修改他的状态为3）
        deleteTable = function deleteTable(id) {
            $.ajax({
                url: '/comment/deleteComment',
                type: 'post',
                dataType: 'json',
                data: {'id': id},
                beforeSend: function () {
                    return confirm("确认删除？");
                },
                success: function (data) {
                    if (data.data) {
                        location.reload();
                    }
                }
            })
        }


    });
</script>
</html>